<template>
  <!-- 添加或修改菜单对话框 -->
  <el-dialog
    :title="title"
    :visible.sync="visible"
    :width="dialogWidth"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <el-form
      ref="dataForm"
      :model="form"
      :rules="rules"
    >
      <el-row :gutter="15">
        <el-col :span="8">
          <el-form-item
            label="房产类型"
            prop="projectBuildingId"
            label-width="120px"
          >
            <el-select
              v-model="form.projectBuildingId"
              placeholder="请选择"
              @change="onChangeTpe()"
              style="width:100%;"
            >
              <el-option
                v-for="item in proBuildTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                :disabled="item.label=='展场'"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item
            label="房产楼号/区域"
            prop="projectUnitId"
            label-width="120px"
          >
            <el-select
              @change="getRecordDetails"
              v-model="form.projectUnitId"
              placeholder="请选择"
              style="width:100%;"
            >
              <el-option
                v-for="item in projectUnitList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item
            label="应缴月份"
            prop="writeDate"
            label-width="80px"
          >
            <!-- <el-input v-model="form.writeDate" placeholder="应缴月份"></el-input> -->
            <el-date-picker
              style="width:100%;"
              @change="getRecordDetails"
              v-model="form.writeDate"
              type="month"
              placeholder="选择月"
              format='yyyy-MM'
              value-format="yyyy-MM"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="抄表类型"
            prop="meterType"
            label-width="120px"
          >
            <el-select
              @change="getRecordDetails"
              v-model="form.meterType"
              placeholder="请选择抄表类型"
              style="width:100%;"
            >
              <el-option
                label="电表"
                :value="1"
              >
              </el-option>
              <el-option
                label="水表"
                :value='2'
              >
              </el-option>
            </el-select>
            <!-- <el-input
              v-model="form.meterType"
              placeholder="请填写楼层"
            ></el-input> -->
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item
            label="抄表时间"
            prop="meterDate"
            label-width="120px"
          >
            <el-date-picker
              @change="getRecordDetails"
              v-model="form.meterDate"
              type="date"
              placeholder="选择抄表日期"
              format='yyyy-MM-dd'
              style="width:100%;"
              value-format="yyyy-MM-dd"
              :picker-options="pickerOptions0"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <avue-crud
        :data="tableOptionModify"
        :option="tableOptionAddModify"
        @row-update="addUpdate"
        @row-del="addDelete"
      >
        <template
          slot='totalPoint'
          slot-scope="scope"
        >
          {{(scope.row.endPoint-scope.row.startPoint)>0?scope.row.endPoint-scope.row.startPoint:0}}
        </template>
      </avue-crud>
    </el-form>
    <div
      slot="footer"
      class="dialog-footer"
    >
      <el-button
        type="primary"
        :disabled='tableOptionModify.length==0?true:false'
        icon='el-icon-circle-check'
        @click="dataFormSubmit"
      >提 交</el-button>
      <el-button
        @click="visible = false"
        icon='el-icon-circle-close'
      >取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { fetchList, getObj, addObj, putObj, delObj } from '@/api/market/estate/rmproject'
import { getRecordDetails, saveRecordDetails } from '@/api/market/meter/Private/person'
import { tableOption, tableOptionModify, tableOptionAddModify } from '@/const/crud/market/meter/Private/person'
import { getDicType } from '@/api/common'
export default {
  name: "Menu",
  components: {},
  data () {

    return {
      pickerOptions0: {
        disabledDate (time) {
          return time.getTime() > Date.now() - 8.64e6;//如果没有后面的-8.64e6就是不可以选择今天的
        }
      },
      title: '',
      dialogWidth: '50%',
      method: '',
      visible: false,
      loading: false,
      tableMarketData: [],
      proBuildTypeList: [],
      projectUnitList: [],
      tableOptionModify: [],
      form: {
        id: '',
        projectBuildingId: '',
        projectUnitId: '',
        projectName: '',
        writeDate: '',
        totalPoint: '',
        totalPointd: '',
        meterDate: '',
        meterType: '',
      },
      tableOptionAddModify: tableOptionAddModify,
      // 表单校验
      rules: {
        writeDate: [
          { required: true, message: "请选择应缴月份", trigger: "change" }
        ],
        projectBuildingId: [
          { required: true, message: "请选择房屋类型", trigger: "change" }
        ],
        projectUnitId: [
          { required: true, message: "请选择房产楼号/区域", trigger: "change" }
        ],
        meterDate: [
          { required: true, message: "请选择抄表时间", trigger: "change" }
        ],
        meterType: [
          { required: true, message: "请选择公表类型", trigger: "change" }
        ],
        unitPrice: [
          { required: true, message: "请选择公摊单价", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    addDelete (row, index) {
      console.log("11111")
    },
    addUpdate (form, index, done, loading) {
      if (parseFloat(this.tableOptionModify[index].endPoint) >= parseFloat(this.tableOptionModify[index].startPoint)) {
        let sum = this.tableOptionModify[index].endPoint - this.tableOptionModify[index].startPoint
        if (sum > 0) {
          this.tableOptionModify[index].totalPoint = sum.toFixed(2)
        } else {
          this.tableOptionModify[index].totalPoint = 0
        }
        this.$message.success('保存成功')
        loading()
        done()
      } else {
        this.$message.warning('本期读数不能小于上期读数')
        loading()
        done()
        this.tableOptionModify[index].$cellEdit = true
      }
    },
    // 表头样式设置
    headClass () {
      return 'text-align: center;background:#fafafa;'
    },
    // 表格样式设置
    rowClass () {
      return 'text-align: center;'
    },
    onChangeTpe () {
      this.form.meterType = ''
      this.form.unitPrice = ''
      // if (this.form.projectBuildingId == 2) {
      //   this.getfoolerOptionsValue('complex_building')
      // } else if (this.form.projectBuildingId == 3) {
      //   this.getfoolerOptionsValue('exhibition')
      // } else if (this.form.projectBuildingId == 1) {
      //   this.getfoolerOptionsValue('exclusive_shop')
      // }
      this.getfoolerOptionsValue(this.form.projectBuildingId)
      this.getRecordDetails()
    },
    getfoolerOptionsValue (name) {
      getDicType(name).then(res => {
        this.form.projectUnitId = ''
        this.projectUnitList = res.data.data
      })
    },
    getRecordDetails () {
      if (!(this.form.projectBuildingId && this.form.meterType && this.form.meterDate && this.form.projectUnitId && this.form.writeDate)) {
      } else {
        getRecordDetails(this.form).then(res => {
          res.data.data.forEach((item, index) => {
            if (!item.totalPoint) {
              item.totalPoint = 0
            }
            item.indexid = index + 1
          })
          this.tableOptionModify = res.data.data
        })
      }
    },
    init (method, id) {
      this.method = method
      this.form.id = id
      if (method === 'add') {
        this.title = `新建抄表信息`
      } else if (method === 'edit') {
        this.title = '修改抄表信息'
      } else if (method === 'view') {
        this.title = '查看抄表信息'
      }
      if (id != null) {
        this.form.parentId = id;
      }
      this.tableOptionModify = []
      this.visible = true
      this.$nextTick(() => {
        this.$refs.dataForm.resetFields()
        getDicType('rm_project_buiding_type').then(res => {
          this.proBuildTypeList = res.data.data
        })
      })
    },
    // 表单提交
    dataFormSubmit () {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.form.recordVos = this.tableOptionModify
          this.form.writeTime = this.form.meterDate
          let isCellEdit = false
          this.tableOptionModify.forEach(item => {
            if (item.$cellEdit) {
              isCellEdit = true
            }
          })
          if (isCellEdit) {
            this.$message.warning('请保存后再提交')
            return
          } else {
            saveRecordDetails(this.form).then(res => {
              if (res.data) {
                this.$message.success("提交成功")
                this.visible = false
                this.$emit("refreshDataList")
              } else {
                this.$message.success("提交失败")
              }
            })
          }
        }
      })
    },
  }
};
</script>
<style lang="scss" scoped>
/deep/.avue-crud__menu {
  display: none;
}
/deep/.avue-crud__pagination {
  display: none;
}
</style>
